<template>
    <!-- 移除 el-drawer，让调用方控制 -->
    <div class="edit-page">
        <!-- 菜品图片 -->
        <div class="store-header">
            <div class="cover-image-container">
                <template v-if="dishData.imageUrl">
                    <img :src="dishData.imageUrl" class="cover-image" alt="菜品图片" />
                    <div class="upload-placeholder" @click="triggerUpload">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <span>点击上传图片</span>
                    </div>
                </template>
                <template v-else>
                    <div class="no-image-placeholder" @click="triggerUpload">
                        <el-icon>
                            <Picture />
                        </el-icon>
                        <span>点击上传图片</span>
                    </div>
                </template>
            </div>
        </div>

        <!-- 菜品信息列表 -->
        <div class="store-info-container">
            <div class="info-item">
                <div class="label">菜品名称</div>
                <div class="value">
                    <el-input v-model="dishData.name" placeholder="请输入菜品名称" />
                </div>
            </div>

            <div class="info-item">
                <div class="label">菜品分类</div>
                <div class="value">
                    <el-select v-model="dishData.categoryName" placeholder="请选择菜品分类或手动输入" style="width: 100%;"
                        filterable allow-create default-first-option>
                        <el-option v-for="category in categoryOptions" :key="category" :label="category"
                            :value="category" />
                    </el-select>
                </div>
            </div>

            

            <div class="info-item">
                <div class="label">售价</div>
                <div class="value">
                    <el-input v-model="dishData.price" type="number" placeholder="请输入售价">
                        <template #prepend>¥</template>
                    </el-input>
                </div>
            </div>

            <div class="info-item">
                <div class="label">描述</div>
                <div class="value">
                    <el-input v-model="dishData.description" type="textarea" placeholder="请输入菜品描述" />
                </div>
            </div>

            <div class="info-item">
                <div class="label">售卖状态</div>
                <div class="value">
                    <el-select v-model="dishData.isAvailable" placeholder="请选择售卖状态" style="width: 100%;">
                        <el-option label="启售" :value="1"></el-option>
                        <el-option label="停售" :value="0"></el-option>
                    </el-select>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <el-button @click="handleCancel">取消</el-button>
            <el-button @click="handleReset">继续添加</el-button>
            <el-button type="primary" @click="handleSave" color="#ffc200">保存</el-button>
        </div>

        <!-- 隐藏的文件输入组件 -->
        <input type="file" ref="fileInputRef" class="hidden-file-input" @change="onFileChange" accept="image/*" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Picture } from '@element-plus/icons-vue'
import { useDishImageUpload } from '@/utils/useDishImageUpload'

// 定义 emit 事件
const emit = defineEmits<{
    (e: 'add:dish', dish: any): void
    (e: 'close'): void
    (e: 'reset'): void // 新增重置事件
}>()

// 定义菜品数据
const dishData = reactive({
    dishesId: 0,
    name: '',
    imageUrl: '',
    categoryName: '',
    price: 0,
    originalPrice: 0,
    isAvailable: 1,
    description: '',
    monthlySales: 0,
    rating: 0,
    ratingCount: 0,
    sortOrder: 0,
    storeId: 0,
    updateTime: '',
    createTime: ''
})

// 预定义的分类选项
const predefinedCategories = ref(['汤类', '鱼类'])

// 计算属性：合并预定义分类和用户输入的新分类
const categoryOptions = computed(() => {
    // 如果当前选择的分类不在预定义列表中，将其添加到选项中
    if (dishData.categoryName && !predefinedCategories.value.includes(dishData.categoryName)) {
        return [...predefinedCategories.value, dishData.categoryName]
    }
    return predefinedCategories.value
})

// 使用图片上传组合函数
const { fileInputRef, triggerUpload, handleFileChange, resetFileInput } = useDishImageUpload()

// 处理文件变更的包装函数
const onFileChange = (event: Event) => {
    handleFileChange(event, (imageUrl) => {
        dishData.imageUrl = imageUrl
    })
}

// 保存菜品的函数调用
const handleSave = (): boolean => {
    if (!dishData.name) {
        ElMessage.error('请输入菜品名称')
        return false
    }

    if (!dishData.categoryName) {
        ElMessage.error('请选择或输入菜品分类')
        return false
    }

    if (!dishData.price || dishData.price <= 0) {
        ElMessage.error('请输入有效的售价')
        return false
    }

    if (!dishData.imageUrl) {
        ElMessage.error('请上传菜品图片')
        return false
    }

    // 发送添加菜品事件给父组件
    emit('add:dish', { ...dishData })
    return true
}

// 取消操作的函数调用
const handleCancel = () => {
    resetForm()
    emit('close')
}

// 继续添加操作的函数调用（清空表单但不关闭抽屉）
const handleReset = () => {
    if (!handleSave()) {
        return
    }
    resetForm()
    ElMessage.success('表单已清空，可以继续添加新菜品')
    emit('reset')
}

// 重置表单
const resetForm = () => {
    dishData.name = ''
    dishData.categoryName = ''
    dishData.price = 0
    dishData.originalPrice = 0
    dishData.isAvailable = 1
    dishData.description = ''
    dishData.imageUrl = ''
}
</script>

<style scoped>
.edit-page {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    margin: 0 auto;
}

.store-header {
    text-align: center;
    margin-bottom: 30px;
}

.cover-image-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-image {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.3s ease;
    object-fit: cover;
}

.upload-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cover-image-container:hover .upload-placeholder {
    opacity: 0.5;
}

.no-image-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
    width: 100%;
    height: 100%;
    cursor: pointer;

    &:hover{
        opacity: 0.5;
    }
}

.no-image-placeholder .el-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.upload-placeholder .el-icon,
.no-image-placeholder .el-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.upload-placeholder span,
.no-image-placeholder span {
    font-size: 14px;
    font-weight: 500;
}

.store-info-container {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 20px;
}

.info-item {
    padding: 16px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
        border-bottom: none;
    }
}

.label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}

.value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
}

/* 隐藏的文件输入组件 */
.hidden-file-input {
    display: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .edit-page {
        padding: 15px;
    }

    .cover-image-container {
        max-width: 100%;
    }

    .info-item {
        padding: 12px 0;
    }

    .label {
        font-size: 13px;
    }

    .value {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .action-buttons .el-button {
        width: 100%;
    }
}

.btn {
    color: #333;
}

.cancelBtn:hover {
    color: #ffc200;
    border-color: #ffc200;
    background-color: #fffbf0;
}
</style>